<template>
  <view class="login-container">
    <!-- 登录标题 -->
    <view class="login-header">
      <text class="login-title">欢迎登录</text>
    </view>
    
    <!-- 登录表单 -->
    <view class="login-form">
      <!-- 手机号输入 -->
      <view class="form-item">
        <input 
          v-model="form.phone" 
          type="number" 
          placeholder="请输入手机号" 
          class="form-input"
          maxlength="11"
        />
      </view>
      
      <!-- 验证码登录部分 -->
      <view v-if="loginType === 1" class="form-item">
        <view class="code-input-wrapper">
          <input 
            v-model="form.code" 
            type="number" 
            placeholder="请输入验证码" 
            class="form-input code-input"
            maxlength="6"
          />
          <button 
            class="get-code-btn" 
            :disabled="countdown > 0"
            @tap="getVerificationCode"
          >
            {{ countdown > 0 ? `${countdown}s后重新获取` : '获取验证码' }}
          </button>
        </view>
      </view>
      
      <!-- 密码登录部分 -->
      <view v-if="loginType === 2" class="form-item">
        <input 
          v-model="form.password" 
          type="password" 
          placeholder="请输入密码" 
          class="form-input"
        />
      </view>
      
      <!-- 登录方式切换 -->
      <view class="login-type-switch">
        <text 
          class="switch-text" 
          @tap="switchLoginType"
        >
          {{ loginType === 1 ? '密码登录' : '验证码登录' }}
        </text>
      </view>
      
      <!-- 登录按钮 -->
      <button class="login-btn" @tap="handleLogin">登录</button>
    </view>
  </view>
</template>

<script>
import { sendVerificationCode, userLogin } from '../../service/api.js'

export default {
  data() {
    return {
      loginType: 1, // 1-验证码登录 2-密码登录
      countdown: 0,
      timer: null,
      form: {
        phone: '',
        code: '',
        password: '',
        type: 1
      }
    }
  },
  methods: {
    // 切换登录方式
    switchLoginType() {
      this.loginType = this.loginType === 1 ? 2 : 1
      this.form.type = this.loginType
    },
    
    // 获取验证码
    async getVerificationCode() {
      if (!this.form.phone) {
        uni.showToast({ title: '请输入手机号', icon: 'none' })
        return
      }
      
      try {
        const res = await sendVerificationCode({ phone: this.form.phone })
        if (res.code === 200) {
          uni.showToast({ title: '验证码已发送', icon: 'none' })
          this.startCountdown()
        }
      } catch (error) {
        console.error('获取验证码失败:', error)
        uni.showToast({ title: '获取验证码失败', icon: 'none' })
      }
    },
    
    // 倒计时
    startCountdown() {
      this.countdown = 60
      this.timer = setInterval(() => {
        if (this.countdown <= 0) {
          clearInterval(this.timer)
          return
        }
        this.countdown--
      }, 1000)
    },
    
    // 处理登录
    async handleLogin() {
      if (!this.form.phone) {
        uni.showToast({ title: '请输入手机号', icon: 'none' })
        return
      }
      
      if (this.loginType === 1 && !this.form.code) {
        uni.showToast({ title: '请输入验证码', icon: 'none' })
        return
      }
      
      if (this.loginType === 2 && !this.form.password) {
        uni.showToast({ title: '请输入密码', icon: 'none' })
        return
      }
      
      // 根据登录方式设置type
      const loginData = {
        phone: this.form.phone,
        type: this.loginType
      }
      
      // 添加对应登录方式的字段
      if (this.loginType === 1) {
        loginData.code = this.form.code
      } else {
        loginData.password = this.form.password
      }
      
      try {
        const res = await userLogin(loginData)
        console.log('登录接口返回的数据:', res); // 新增日志输出
        if (res.code === 200) {
          uni.showToast({ title: '登录成功', icon: 'none' })
          // 存储token到本地
          uni.setStorageSync('token', res.data)
          console.log('存储的token:', uni.getStorageSync('token')); // 新增日志输出
          // 立即跳转，无需延迟
          uni.reLaunch({ 
            url: '/pages/home/home',
            success: () => {
              // 清除登录页面的历史记录，防止返回
              const pages = getCurrentPages()
              if (pages.length > 1) {
                uni.navigateBack({ delta: pages.length - 1 })
              }
            }
          })
        }
      } catch (error) {
        console.error('登录失败:', error)
        uni.showToast({ title: '登录失败', icon: 'none' })
      }
    }
  },
  
  beforeDestroy() {
    if (this.timer) {
      clearInterval(this.timer)
    }
  }
}
</script>

<style>
.login-container {
  padding: 60rpx;
  height: 100vh;
  background: linear-gradient(135deg, rgba(170, 207, 252, 1) 0%, rgba(187, 208, 251, 1) 50%, rgba(178, 236, 248, 1) 100%);
}

.login-header {
  margin-bottom: 80rpx;
}

.login-title {
  font-size: 48rpx;
  font-weight: bold;
  color: #333;
}

.login-form {
  margin-top: 40rpx;
}

.form-item {
  margin-bottom: 40rpx;
}

.form-input {
  width: 100%;
  height: 100rpx;
  padding: 0 30rpx;
  border-radius: 50rpx;
  background-color: #fff;
  font-size: 32rpx;
}

.code-input-wrapper {
  display: flex;
  align-items: center;
}

.code-input {
  flex: 1;
  margin-right: 20rpx;
}

.get-code-btn {
  width: 200rpx;
  height: 100rpx;
  line-height: 100rpx;
  border-radius: 50rpx;
  background: #fff;
  color: #5983ff;
  font-size: 28rpx;
}

.get-code-btn[disabled] {
  background-color: #ccc;
}

.login-type-switch {
  margin: 20rpx 0 60rpx;
  text-align: right;
}

.switch-text {
  color: #5983ff;
  font-size: 28rpx;
}

.login-btn {
  width: 100%;
  height: 100rpx;
  line-height: 100rpx;
  border-radius: 50rpx;
  background: #5983ff;
  color: #fff;
  font-size: 36rpx;
}
</style>